<template>
	<view class="wakin-node-line-item" :ref="`RefDom${domId}`">
		<view class="w-line-area" :style="{width:dotSize+'rpx',height:height+'px'}">
			<view class="w-badge" :style="[dotStyle]">
			</view>
			<view class="w-border" :style="[lineStyle]"></view>
		</view>
		<view class="w-content">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	import {
		GetRect
	} from './utils'
	// import BasicConfig from "@/utils/config"
	export default {
		name: "WakinNodeLineItem",
		props: {
			dotSize: {
				type: Number,
				default: 30
			},
			dotBgColor: {
				type: String,
				default: 'rgb(26,188,156)', // '#009fee', // 00bf00 // BasicConfig.MainColor
			},
			dotRadius: {
				type: String,
				default: "100%"
			},
			dotColor: {
				type: String,
				default: "transparent"
			},
			borderColor: {
				type: String,
				default: 'rgb(26,188,156)', // "#009fee"
			}
		},
		data() {
			return {
				domId: uni.$u.guid(),
				height: 0,
			}
		},
		computed: {
			lineAreaStyle() {
				return {
					width: this.dotSize + 'rpx',
					height: this.height + 'px'
				}
			},
			dotStyle() {
				return Object.assign({}, {
					width: this.dotSize + 'rpx',
					height: this.dotSize + 'rpx',
					"background-color": this.dotBgColor,
					"border-radius": this.dotRadius,
					color: this.dotColor
				})
			},
			lineStyle() {
				const lineWidth = 2;
				console.log("this.isLastLine()", this.isLastLine());
				return {
					// top: ((this.dotSize) / 2) + 'rpx',
					// left: ((this.dotSize) / 2) + 'rpx',
					top: 0,
					right: 0,
					bottom: 0,
					left: 0,
					margin: 'auto',
					width: this.isLastLine() ? "0" : (lineWidth + 'rpx'),
					// height: (this.height * 2 - this.dotSize / 2) + 'rpx',
					height: this.height + 'px',
					'background-color': this.borderColor
				}
			}
		},
		methods: {
			isLastLine() {
				const parent = this.$parent
				if (parent?.$children) {
					const childRenLength = parent?.$children.length;
					const index = parent?.$children.findIndex(f => f._uid === this._uid);
					if (index === childRenLength - 1) {
						return true
					}
				}
				return false;
			}
		},
		mounted() {
			setTimeout(() => {
				GetRect('.wakin-node-line-item', this).then(res => {
					this.height = res.height;
				})
			}, 50)
		},
	}
</script>

<style lang="less" scoped>
	.wakin-node-line-item {
		position: relative;
		display: flex;
		align-items: flex-start;

		.w-line-area {
			position: relative;
		}

		.w-badge {
			z-index: 2;
			border: 6rpx solid #ffffff;
			position: absolute;
			box-shadow: 0rpx 0rpx 20rpx rgba(114, 130, 138, 0.2);
		}

		.w-border {
			z-index: 1;
			position: absolute;
		}

		.w-content {
			margin-left: 30rpx;
		}
	}
</style>